<!DOCTYPE html>
<html lang="en">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        $(function () {
            $("input[type=text]").focus(function () {
                $(".img1").css({"background-position": "0px -48px"})
            })
            $("input[type=text]").focusout(function () {
                $(".img1").css({"background-position": " 0px 0px;"})
            })
            $("input[type=password]").focus(function () {
                $(".img2").css({"background-position": "-48px -48px"})
            })
            $("input[type=password]").focusout(function () {
                $(".img2").css({"background-position": " -48px 0px;"})
            })
            $("input[type=submit]").click(function () {
                let name = $("input[type=text]").val();
                let password = $("input[type=password]").val();
                if (!name) {
                    $(".msg").show().html("请输入用户名！").css("visibility", "visible")
                    return;
                    // alert("adniwd")
                }
                if (!password) {
                    $(".msg").show().html("请输入密码！").css("visibility", "visible")
                    return;
                }
             //   // 使用AJAX请求服务器
             //    let xhr = new XMLHttpRequest()
              //   xhr.open();
             //    xhr.open("post", "http://localhost:8080/login/login/LoginServlet")
             //    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8")
             //    xhr.onreadystatechange = function () {
             //        if (this.response == 4) {
             //            if (this.status > 200 && this.status < 300) {
             //                let jsonData = this.responseText;
             //                console.log("服务器的响应：", jsonData)
             //                let data = JSON.parse(jsonData);
             //                if (data.code===30){
             //    //                 window.location="http://localhost:8080/login/succ.html"
             //    //             }else if (data.code===30) {
             //                    $(".msg").show().html(data.msg).css("visibility", "visible")
             //                }
             //                    }
             //        }
             //
             //    }
             //    xhr.send("name=" + name + "&password=" + password )
            })

        })

    </script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            color: black;
            list-style: none;
            text-decoration: none;
        }

        .one {
            border: 1px solid black;
            width: 400px;
            height: 288px;
            padding-top: 20px;
            padding-left: 20px;
            position: absolute;
            top: 200px;
            left: 850px;
        }

        .head > a:first-child {
            font-weight: 900;
            position: absolute;
            top: 20px;
            left: 50px;

        }

        .head > a:last-child {
            font-weight: 900;
            position: absolute;
            top: 20px;
            left: 250px;
        }

        .head > a:hover {
            color: red;
        }

        .user {
            height: 38px;
            width: 342px;
            border: 2px solid black;
            position: absolute;
            top: 80px;
        }

        .user > input {
            height: 38px;
            width: 304px;
            border: 1px solid black;
            position: absolute;
            left: 38px;
            top: -1px;
        }

        .img1 {
            width: 38px;
            height: 38px;
            background-image: url(jingdong-icons.png);
            background-repeat: no-repeat;
            position: absolute;
            background-position: 0px 0px;
        }

        .img2 {
            width: 38px;
            height: 38px;
            background-image: url(jingdong-icons.png);
            background-repeat: no-repeat;
            background-position: -48px 0px;
        }

        .pwd {
            height: 38px;
            width: 342px;
            border: 2px solid black;
            position: absolute;
            top: 150px;
        }

        .pwd > input {
            height: 38px;
            width: 304px;
            border: 1px solid grey;
            position: absolute;
            left: 38px;
            top: -1px;
        }

        .sub {
            background-color: red;
            width: 342px;
            height: 38px;
            position: absolute;
            top: 220px;
        }

        .msg {
            width: 345px;
            height: 20px;
            position: absolute;
            background-color: red;
            top: 60px;
            left: 20px;
            visibility: hidden;
        }
        .regist{
            background-color: red;
            width: 342px;
            height: 30px;
            position: absolute;
            top: 265px;
            border: 1px solid black;
        }
        .regist>a{
            position: absolute;
            left: 152px;
        }

    </style>
</head>

<body>
<div class="one">
    <div class="head">
        <a href="">扫码登陆</a>
        <a href="">账户登录</a>
    </div>
    <div class="msg"></div>
    <form action="http://localhost:8080/login/Servlet.LoginServlet" method="post">

        <div class="user">
            <div class="img1"></div>
            <input type="text" placeholder="邮箱/用户名/登录手机" name="user">
        </div>
        <div class="pwd">
            <div class="img2"></div>
            <input type="password" placeholder="密码" name="pwd">
        </div>
        <input class="sub" type="submit">
    </form>
    <div class="regist"><a href="http://localhost:8080/login/login/regist.html">注册</a></div>

</div>
</body>

</html>